<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" @input="fn()">
        <!-- change事件、propertychange事件和input事件都有什么区别 -->
        <!-- onchange:value变化且失去焦点时 -->
        <!-- oninput:value变化 -->
        <!-- propertychange IE的事件 input -->
        <p>内容是:{{msg}}</p>
        <p v-text="msg">asdasdsadas{{num}}dsadasd</p>
        <p v-text="str"></p>
        <p v-html="str"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: '<span>span</span>',
                num: 1,
                msg: 'abc'
            },
            methods: {
                fn() {
                    console.log('fn---');

                }
            }
        })
    </script>

</body>

</html>

<!-- 
1. vue是前端js框架 (React/Angular)
2. vue框架
    最大程度解放DOM操作
    适合做SPA
3. 核心特性
    3.1 通过指令增强了HTML功能 在视图中通过{{}}使用数据
    3.2 数据驱动视图 data ->变化 -> 视图自动更新
    3.3 双向数据绑定 v-model V->M M->V
    3.4 虚拟DOM -> {}
    3.5 原来DOM操作 -> 各个不同的指令
4. Vue实例选项
    4.1 el:指定当前Vue实例所管理的视图 #app 不要直接管理html or body
    4.2 data:响应式数据 
        4.2.1 在视图中 {{msg}}
        4.2.2 在视图中 指令的表达式中使用数据
        4.2.3 可以通过vm.msg 访问数据
    4.3 methods:写方法
        4.3.1 在视图中 {{fn()}}
        4.3.2 在视图中 v-on:click="fn()"
        4.3.3 v-on:click="fn($event)"
        4.3.4 vm.fn()
        4.3.5 方法中的this指的当前Vue实例
        注意: ()=>{this指的不是Vue实例对象} 
5. 术语:
    5.1 {{}}插值表达式 
    {{msg}}  {{fn()}} 内容是:{{msg}} {{a>b?a:b}}
    不能写 {{var a = 10;  if for }}
    5.2 指令
    位置:标签的开始标签中
    特点:v-开头
    作用:增强HTML功能
6. v-text和v-html:替代标签的全部内容
    条件渲染 v-if 和 v-show(display)) 值是data中的bool值
    列表渲染 v-for 
        a. 数组 v-for="(item,i) in arr" :key="i"
        b. 对象 v-for="(v,k,i) in obj" :key="i"
    v-on 绑定事件 @事件名.修饰符="methods中的方法"
    v-bind 绑定标签的任意属性 id和src 
    v-model 表单元素 -> 双向数据绑定
        <input type="text" /> 
        input v-bind:value="msg" @input="msg=$event.target.value"

-->